HTML 접근 및 수정

✒️ 2025-05-16 11:22 내용 수정

문서 객체 모델(Document Object Model)#HTML 요소 가져오기로 요소를 가져와 속성을 변경하거나 클래스를 수정할 수 있다.
또한 HTML 요소의 자식 요소를 추가할 수 있다.

객체의 속성 다루기

객체 요소의 속성을 확인하고 수정할 수 있다.
각 요소의 속성 이름을 알고 있다면 속성 이름을 사용해서 속성값을 바로 변경할 수 있다.
css의 style도 property로 접근할 수 있다. style="value";
- CSS 접근 및 수정 참고.
HTML에서 dataset attribute을 사용하면 추가적인 정보도 담아둘 수 있다.
- 참고 자료 : mdn web docs html use data attributes, 꿈꾸는 개발자's HTML에서 data-속성을 이용하여 태그를 데이터로 사용해보자

<!-- data- 뒤에 지정할 이름을 적고, 이름끼리 구분은 - 를 사용 -->
<p class="test" data-custom-extra="value">dataset을 추가한 html</p>

// javascript에서 접근할 때는 카멜 표현식으로 접근
let test = document.querySelector(".test");
let data = test.dataset.customExtra;

메소드	설명
`hasAttribute(속성)`	지정한 속성을 가지고 있는지 검사
`getAttribute(속성)`	지정한 속성을 가져옴
`setAttribute(속성, 속성값)`	속성과 속성값 설정
`removeAttribute(속성)`	지정한 속성 제거

selector.hasAttribute('attrName');
selector.getAttribute('attrName');
selector.setAttribute('attrName', value);
selector.removeAttribute('attrName');

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		
		<p class="pclass">클래스가 있는 p태그</p>
		
		<script>
			let p = document.querySelector('.pclass');
			
			console.log(p.hasAttribute('style')); // false
			
			console.log(p.getAttribute('class')); // pclass
			
			p.setAttribute('style', 'color:red');
			// p.style = 'color:blue'; // 속성 이름으로 바로 변경할 수 있다.
			p.removeAttribute('class');
			console.log(p);
			console.log(p.hasAttribute('class')); // class를 지웠기에 false
		</script>
	</body>
</html>

DOM 3.png

HTML 요소의 Content에 접근하기

mdn web docs innerHTML, mdn web docs innerText, mdn web docs textContent

HTML 요소의 내용을 읽거나 수정할 때 textContent, innerText, innerHTML을 사용하며 각각은 동작 방식과 용도가 다르다.

속성	설명	HTML 태그 처리	숨김 요소 포함 여부	스타일 반영	보안 위험성
`textContent`	요소의 모든 텍스트 콘텐츠를 반환 HTML 태그를 무시	무시	✔️	❌	낮음
`innerText`	요소의 렌더링된 텍스트를 반환 CSS 스타일을 고려함	무시	❌	✔️	낮음
`innerHTML`	요소의 HTML 콘텐츠를 반환 HTML 태그를 포함	포함	✔️	✔️	높음

textContent : <script>, <style>을 포함한 요소의 모든 텍스트 컨텐츠를 반환한다.
- 영역 내에 있는 HTML 태그(<strong>, <span> 등)를 무시한다.
- 숨김 처리한 요소를 포함하여 반환한다.
- 스타일을 반영하지 않는다.
- 보안 위험성이 낮다.

document.querySelector(".test").textContent;

innerText : 요소의 렌더링된 텍스트(화면에서 사람이 보는 텍스트)를 반환한다.
- 영역 내에 있는 HTML 태그(<strong>, <span> 등)를 무시한다.
- 숨김 처리한 요소를 제외하여 반환한다.
- 스타일을 반영하여 반환한다.
- 보안 위험성이 낮다.

document.querySelector(".test").innerText;

innerHTML : 요소의 HTML 컨텐츠를 반환한다.
- 영역 내에 있는 HTML 태그(<strong>, <span> 등)를 포함한다.
- 숨김 처리한 요소를 포함하여 반환한다.
- 스타일을 반영하여 반환한다.
- 보안 위험성이 높다.

el.innerHTML = null은 el.innerHTML = ""와 동일하다.

document.querySelector(".test").innerHTML;

세 항목을 비교하면 아래처럼 나온다.

<p id="example">
	보이는 텍스트
	<span class="hidden">숨겨진 텍스트</span>
	<strong>굵은 텍스트</strong>
</p>

<script>
	const p = document.getElementById('example');

	console.log('textContent:', p.textContent);
	console.log('innerText:', p.innerText);
	console.log('innerHTML:', p.innerHTML);
</script>

HTML 요소의 클래스 접근 및 수정하기

classList : 해당 element의 css class들을 가져오는 property
- 참고 자료 : mdn web docs classlist
classList.add('className');를 통해 class 속성을 만들고 값을 넣을 수 있다.
반대로 속성을 제거할 때 classList.remove('className');을 사용한다.

let list = selector.classList;

selector.classList.add('newClass');
selector.classList.toggle('toggleClass');

메소드	설명
`add('className')`	해당 element에 class 추가
`remove('className')`	해당 element의 class 제거
`toggle('className' [, force])`	해당 element에 토글형 class 적용.
	class가 존재하면 제거하고 false 반환, class가 없다면 추가하고 true 반환
	두 번째 파라미터가 true라면 class 추가, false라면 class 제거
`contains('className')`	해당 element에 특정 class가 있는지 확인
`replace('oldName', 'newName')`	해당 element에 존재하는 class를 새로운 class로 교체

target.classList.add('pclass');
console.log(target.getAttribute('class'));

DOM 5.png

HTML 요소 추가 및 삭제

참고 자료 : W3School DOM Nodes

요소 생성하기

const el = document.createElement("div");
el.textContent = "새 박스";
el.classList.add("box"); // 요소에 클래스 추가

요소 추가하기

메서드	설명
`appendChild()`	부모 노드의 자식 노드들 중 맨 마지막에 새 노드 추가 노드 객체만 추가 가능
`append()`	요소의 자식 노드들 중 마지막 위치에 새 노드나 문자열을 추가
`prepend()`	요소의 자식 노드들 중 맨 처음 위치에 새 노드나 문자열을 추가
`insertBefore(new, ref)`	부모 노드의 자식 노드들 중 특정 위치의 자식 노드 앞에 새 노드 추가

const parent = document.getElementById("container");
parent.appendChild(el); // 맨 마지막에 추가

요소 제거하기

메서드	설명
`remove()`	요소를 DOM에서 제거
`removeChild()`	자식 노드를 제거

parent.remove(el);
el.remove();

document.write()로 HTML 출력 스트림에 바로 내용을 작성할 수 있다.
- 참고 자료 : W3School DOM HTML

document.write("text");

기타 property

크기와 연관된 property

property	설명
`clientWidth`	padding을 포함한 폭
`clientWidth`	padding을 포함한 높이
`offsetWidth`	border, padding, 스크롤바를 포함한 폭
`offsetHeight`	border, padding, 스크롤바를 포함한 높이
`scrollWidth`	overflow 때문에 볼 수 없는 폭까지 padding을 포함한 폭
`scrollHeight`	overflow 때문에 볼 수 없는 높이까지 padding을 포함한 높이

예제 코드 - 구구단 만들기

예제는 수업 시간에 진행한 구구단 만들기다.

selector.innerHTML = 'Content';

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<style>
			div{border: 2px solid black;
				width:300px;
				height:250px;
				background-color: darkslategray; 
				color:white;
				font-size: 20px;
				text-align: center;}
		</style>
		<script>
			function cal() {
				let num = Number(document.getElementById('num').value);
				let result = document.querySelector('#result');
				
				// 유효성 검사 - 문자열
				if (isNaN(num)) {
					alert("숫자만 입력해주세요");
					return; // 함수 빠져나오기
				}
				
				// 유효성 검사 - 2 ~ 9 외의 숫자
				if (num < 2 || num > 9) {
					alert("2에서 9 사이의 숫자만 입력해주세요");
					return; // 함수 빠져나오기
				}
				
				// result 초기화
				result.innerHTML = '';
				
				for(var i = 1; i <= 9; i++) {
					result.innerHTML += `${num} X ${i} = ${num*i} <br>`;
				}
			}
			
			var isVisible = true;
			function hide() {
				isVisible = !isVisible;
				
				// 숨기기 버튼과 보이기 버튼 이름 설정
				document.getElementById('hide').value = (isVisible ? "숨기기" : "보이기");
				
				// 결과창 표시
				document.querySelector('#result').style.display = (isVisible ? 'block' : 'none');
			}
		</script>
	</head>
	<body>
		숫자를 입력하세요 : 
		<input id="num">
		<input id="cal" type="button" value="계산하기" onclick="cal()">
		<input id="hide" type="button" value="숨기기" onclick="hide()">
		<hr>
		<div id="result">
		</div> 
	</body>
</html>

구구단 1.png
구구단 2.png
구구단 3.png
구구단 4.png
구구단 5.png